<template>
  <el-card class="cardContainer" :body-style="{ height: 'calc(100% - 78px)' }">
    <template #header>
      已完成案件
    </template>
    <div class="selectContainer">
      <div class="selectItem">
        <span> 调解结果 </span>
        <el-select v-model="selectData.caseState" placeholder="选择调解结果" clearable filterable @change="">
          <el-option :value="CaseStatus.success" :label="CaseStatus.getCommentByStatus(CaseStatus.success)"></el-option>
          <el-option :value="CaseStatus.fail" :label="CaseStatus.getCommentByStatus(CaseStatus.fail)"></el-option>
          <el-option :value="CaseStatus.nullify" :label="CaseStatus.getCommentByStatus(CaseStatus.nullify)"></el-option>
        </el-select>
      </div>
      <div class="selectItem" style="width: 300px;">
        <span>调解时间</span>
        <el-date-picker v-model="selectData.timeRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
          start-placeholder="开始时间" end-placeholder="结束时间" />
      </div>
    </div>
    
    <el-table :data="selectData.showCases" :border="true" class="tableContainer">
      <el-table-column label="案件编号" prop="caseId" width="100">
      </el-table-column>
      <el-table-column label="申请人" prop="applicant.name">
      </el-table-column>
      <el-table-column label="被申请人" prop="respondent.name">
      </el-table-column>
      <el-table-column label="调解时间" prop="respondent.name">
        <template #default="scope">
          <span>{{ Case.getMediationTime(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="调解结果">
        <template #default="scope">
          <span>{{ CaseStatus.getCommentByStatus(scope.row.caseState) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-tooltip content="查看详细" placement="bottom" effect="dark">
            <el-button type="success" round @click="detailedDialog.look(scope.row.caseId, scope.row)"
              icon="view"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <DetailedCase v-model="detailedDialog.visible" :case="detailedDialog.case" :case-id="detailedDialog.caseId">
  </DetailedCase>
</template>
<script lang="ts" setup>
import { getCompletedCaseByMediatorId } from '@/axios/case/caseReq';
import { Case, CaseStatus } from '@/types/response/case';
import { computed, reactive } from 'vue';
import DetailedCase from '@/compontent/detailedCase.vue';
import useUserStore from '@/stores/userStore';
import { TimeUtil } from '@/utils/timeUtil';
let userStore = useUserStore();
let caseList: Case[] = reactive([]);
let caseIdSet = new Set();//避免重复
let selectData = reactive({
  timeRange: [],
  caseState: null,
  showCases: computed(() => {
    if(!selectData.timeRange?.length&&selectData.caseState==null) return caseList;
    let shows = [...caseList];
    if (selectData.timeRange?.length) {
      shows=Case.getInMediatorRangeDay(shows,selectData.timeRange[0],selectData.timeRange[1]);
    }
    if (selectData.caseState != null) {
      shows = shows.filter(item => item.caseState === selectData.caseState);
    }
    return shows;
  })
})
//获得未完结的案件
getCompletedCaseByMediatorId(userStore.userId).then(res => {
  res.forEach(item => {
    if (!caseIdSet.has(item.caseId)) {
      caseList.push(item);
      caseIdSet.add(item.caseId);
    }
  })
})
let detailedDialog: {
  visible: boolean,
  caseId: number,
  case: Case,
  look: (caseId: number, ca: Case) => void;
} = reactive({
  visible: false,
  caseId: null,
  case: null,
  look(caseId: number, ca: Case) {
    detailedDialog.visible = true;
    detailedDialog.caseId = caseId;
    detailedDialog.case = ca;
  }
})

</script>
<style scoped lang="scss">
.cardContainer {
  height: 90%;

  .selectContainer {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    margin-bottom: 20px;

    .selectItem {
      display: flex;
      align-items: center;
      white-space: nowrap;
      width: 250px;
      margin-right: 20px;

      span {
        width: fit-content;
        margin-right: 10px;
      }
    }
  }

  .tableContainer {
    height: calc(100% - 70px);
  }
}
</style>